<template>
  <div class="vid">
      <video   width="400" height="200" muted ref='video' @mouseover="menter" @mouseleave="mleave">
        <source src="./yang.mp4" type="video/ogg" />
        <source src="./yang.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>

      <div class="gn">
          <div class="play">
              <i class="el-icon-video-play" v-show="!isplay" @click="canplay('on')"></i>
              <i class="el-icon-video-pause" v-show="isplay" @click="canplay('off')"></i>
          </div>
          <div class="line" ref='line'>
              <div class="tline" ref='tline'></div>
              <div class="nline" ref='nline'></div>
              <div class="ball" @mousedown='move' ref="ball"></div>
              <div class="time" ref='stime'>{{currentTime}}/{{duration}}</div>
          </div>
          <div class="muted">
              <i class="el-icon-close-notification" v-show="ismuted" @click="canmuted('on')"></i>
              <i class="el-icon-bell" v-show="!ismuted" @click="canmuted('off')"></i>
          </div>
      </div>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted ,ref, watch} from 'vue'
export default {
  directives:{
     drag:{
         mounted(el){
           console.log('自定义指定')
         }
     }
  },
  setup(){
      let {ctx}=getCurrentInstance()
      let isplay=ref(false)
      let ismuted=ref(true)
      let video=null
      let line=null
      let tline=null
      let nline=null
      let stime=null
      let ball=null
      let ballLeft=ref(0)
      let tlineWidth=null
      let currentTime=ref(0)
      let duration=ref(0)
      onMounted(()=>{
         video=ctx.$refs.video
         line=ctx.$refs.line
         tline=ctx.$refs.tline
         tlineWidth=tline.offsetWidth
         nline=ctx.$refs.nline
         stime=ctx.$refs.stime
         ball=ctx.$refs.ball
         
         line.onselectstart=()=>false
         stime.onselectstart=()=>false

         let t=setTimeout(()=>{
             duration.value=(~~video.duration)
             clearTimeout(t)
         },1000)
      })
      let tv=null
      watch(isplay,(newv)=>{
          if(newv===true){
             tv=setInterval(() => {
                 currentTime.value=~~video.currentTime
                 let long=((currentTime.value-0)/(duration.value-0))*tlineWidth
                 nline.style.width=long+'px'
                 ball.style.left=long+'px'
                 if(currentTime.value==duration.value) isplay.value=false
             }, 1000);
          }else{
             clearInterval(tv)
          }
      })
      watch(ballLeft,(newv)=>{
          console.log(newv)
         let bl=(newv/tlineWidth)
         video.currentTime=~~(duration.value*bl)
         currentTime.value=video.currentTime
      })
      function menter(){
          video.muted=false
          ismuted.value=false
      }
      function mleave(){
          video.muted=true
          ismuted.value=true
      }

      function canplay(value){
          if(value==='on'){
              video.play()
              isplay.value=true
          }else{
              video.pause()
              isplay.value=false
          }
      }
      function canmuted(value){
          if(value==='on'){
              video.muted=false
              ismuted.value=false
          }else{
              video.muted=true
              ismuted.value=true
          }
      }
      function move(e){
         let offset=e.offsetX
         line.onmousemove=function(en){
             let lx=en.clientX-line.offsetLeft-offset
             if(lx<=0){
                 lx=0
             }else if(lx>=287){
                 lx=287
             }
             nline.style.width=lx+'px'
             e.target.style.left=lx-offset+'px'
             ballLeft.value=lx
         }
         document.onmouseup=function(){
             line.onmousemove=null
         }
         line.onmouseleave=function(){
             line.onmousemove=null
         }
      }


      return {
          menter,mleave,isplay,ismuted,move,canplay,canmuted,currentTime,duration
      }
  }
}
</script>

<style lang='less' scoped>
  .vid{
      .gn{
          width: 400px;
          height: 30px;
          line-height: 30px;
        //   border: 1px solid red;
          display: flex;
          .play{
              width: 30px;
              text-align: center;
            //   border: 1px solid;
          }
          .line{
              position: relative;
              width: 340px;
              height: 30px;
              line-height: 30px;
            //   border: 1px solid green;
              padding: 0 10px;
              .tline{
                  position: absolute;
                  top:13px;
                  left: 0;
                  width: calc(100% - 50px);
                  height:4px;
                  background: rgb(139, 139, 233);
              }
              .nline{
                  position: absolute;
                  top: 12px;
                  left: 0;
                  background: red;
                  width: 0;
                  height: 6px;
                  z-index: 2;
              }
              .ball{
                  position: absolute;
                  top:12px;
                  left: 0;
                  border-radius: 50%;
                  width: 6px;
                  height:6px;
                  background: #fff;
                  z-index: 3;
              }
              .time{
                  position: absolute;
                  bottom:0;
                  right: 0;
                  width:50px;
                  height: 30px;
                  line-height: 30px;
                  font-size: 12px;
                //   border: 1px solid;
                  padding-left: 3px;
              }
          }
          .mued{
              width: 30px;
              text-align: center;
            //   border: 1px solid ;
          }
      }
  }
</style>